```html
<script setup>
  import * as menu from "@zag-js/menu"
  import { normalizeProps, useMachine } from "@zag-js/vue"
  import { computed, ref } from "vue"

  const data = {
    order: [
      { label: "Ascending", value: "asc" },
      { label: "Descending", value: "desc" },
      { label: "None", value: "none" },
    ],
    type: [
      { label: "Email", value: "email" },
      { label: "Phone", value: "phone" },
      { label: "Address", value: "address" },
    ],
  }

  const orderRef = ref("")
  const typeRef = ref([])

  const service = useMachine(menu.machine, { id: "1" })

  const api = computed(() => menu.connect(service, normalizeProps))

  const radios = computed(() =>
    data.order.map((item) => ({
      label: item.label,
      id: item.value,
      type: "radio",
      value: item.value,
      checked: item.value === orderRef.value,
      onCheckedChange(v) {
        orderRef.value = v ? item.value : ""
      },
    })),
  )

  const checkboxes = computed(() =>
    data.type.map((item) => ({
      id: item.value,
      label: item.label,
      type: "checkbox",
      value: item.value,
      checked: typeRef.value.includes(item.value),
      onCheckedChange(v) {
        typeRef.value = v
          ? [...typeRef.value, item.value]
          : typeRef.value.filter((x) => x !== item.value)
      },
    })),
  )
</script>

<template>
  <button ref="ref" v-bind="api.getTriggerProps()">Trigger</button>
  <div v-bind="api.getPositionerProps()">
    <div v-bind="api.getContentProps()">
      <div
        v-for="item in radios"
        :key="item.value"
        v-bind="api.getOptionItemProps(item)"
      >
        <span v-bind="api.getItemIndicatorProps(item)">✅</span>
        <span v-bind="api.getItemTextProps(item)">{{ item.label }}</span>
      </div>
      <hr v-bind="api.getSeparatorProps()" />
      <div
        v-for="item in checkboxes"
        :key="item.value"
        v-bind="api.getOptionItemProps(item)"
      >
        <span v-bind="api.getItemIndicatorProps(item)">✅</span>
        <span v-bind="api.getItemTextProps(item)">{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>
```
